import { DownloadOutlined, EditOutlined, ShareAltOutlined } from '@ant-design/icons';
import { Avatar, Card, List, Tooltip } from 'antd';
import React, { useState } from 'react';
import useStyles from './index.style';

const Applications: React.FC = () => {
  const { styles: stylesApplications } = useStyles();
  const avatar =
    'https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280';
  const [dataList] = useState([
    {
      id: 1,
      avatar,
      title: '用户资料设置',
    },
    {
      id: 2,
      avatar,
      title: '系统通知中心',
    },
    {
      id: 3,
      avatar,
      title: '隐私权限管理',
    },
    {
      id: 4,
      avatar,
      title: '账号安全验证',
    },
    {
      id: 5,
      avatar,
      title: '帮助与反馈',
    },
  ]);

  return (
    <List<any>
      rowKey="id"
      className={stylesApplications.filterCardList}
      grid={{
        gutter: 24,
        xxl: 3,
        xl: 2,
        lg: 2,
        md: 2,
        sm: 2,
        xs: 1,
      }}
      dataSource={dataList}
      renderItem={(item) => (
        <List.Item key={item.id}>
          <Card
            hoverable
            actions={[
              <Tooltip key="download" title="下载">
                <DownloadOutlined />
              </Tooltip>,
              <Tooltip title="编辑" key="edit">
                <EditOutlined />
              </Tooltip>,
              <Tooltip title="分享" key="share">
                <ShareAltOutlined />
              </Tooltip>,
            ]}
            styles={{ body: { paddingBottom: 20 } }}
          >
            <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
          </Card>
        </List.Item>
      )}
    />
  );
};
export default Applications;
